<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common::head-js">
</head>
<script th:src="@{../myresource/vui/user/permission.js}" ></script>
<body>
<div>
    <!--左侧-->
    <div class="lr-layout-wrap panel panel-body ma">
        <div class="lr-layout-title">
            <i class="icon icon-shield"></i>
            <span id="titleinfos">权限信息</span>
        </div>
        <div id="companyTree" class="lr-layout-body lr-tree mCustomScrollbar  mCS_no_scrollbar" style="overflow: visible;">
            <ul id="permisTree" class="ztree"></ul>
        </div>
    </div>
    <!--内容区域-->
    <div class="lr-layout-wrap panel panel-body fa">
        <div class="lr-layout-title">
            <span id="titleinfo">权限信息</span>
        </div>

        <div class="lr-layout-tool">
            <div class="btn-toolbar">
                <div class="btn-group">
                    <button shiro:hasPermission="permission:add" class="btn" type="button" data-toggle="modal" data-target="#mymodel"><i class="icon icon-plus-sign"></i>添加权限</button>
                </div>
            </div>
        </div>

        <div class="lr-layout-body" style="padding-left: 30px; padding-top: 28px; min-height: 0px;">
            <div class="mCustomScrollbar">
                <form id="menuListForm" method="post" action="">
                    <table id="treeTable" class="table table-striped table-bordered table-condensed">
                        <thead>
                        <tr>
                            <th>权限名称</th>
                            <th>权限标识</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody  id="treeTableList">
                        </tbody>
                    </table>
                </form>
            </div>
        </div>
    </div>
    <!--对话框 添加菜单-->
    <div class="modal fade" id="mymodel">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title"> <i class="icon icon-shield"></i>权限信息</h4>
                </div>
                <div class="modal-body">
                    <form th:action="@{/permission/addOrupdate}" method="post" class="form-horizontal" id="permissionForm">
                        <div class="form-group">
                            <label class="col-sm-2" for="parentName">父级标识</label>
                            <div class="col-md-6  col-sm-10">
                                <input id="parentId" name="parentid" class="required" type="hidden"/>
                                <input name="parentName" readonly="readonly" type="text"  id="parentName" placeholder="父级标识"  class="form-control" style="width: 90%;"/>
                                <a id="menuButton" href="javascript:$.permission.showMenu();" style="position: absolute;top: 9px; right: 20px;">&nbsp;<i class="icon icon-search" style="font-size: 20px;"></i>&nbsp;</a>&nbsp;&nbsp;
                            </div>
                        </div>
                        <div id="menuContent"  style="display:none; position: absolute; background: #f0f6e4; z-index: 9999;overflow: hidden;left: 162px;top: 47px;">
                            <ul id="menuTrees" class="ztree" style="margin-top:0; width:200px;"></ul>
                        </div>
                        <div class="form-group">
                            <label for="permission" class="col-sm-2">权限标识</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="hidden" class="form-control" name="id">
                                <input type="text" class="form-control" id="permission"  name="permission"  placeholder="权限标识" required="true">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="remark" class="col-sm-2">权限描述</label>
                            <div class="col-md-6 col-sm-10">
                                <input type="text" class="form-control" id="remark"  name="remark"  placeholder="权限描述" required="true">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="$.permission.submitForm();">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    /*<![CDATA[*/
    $vui.Loading("拼命加载中，请稍后...",{overlay:true,timeout:0,icon:"icon icon-spin icon-spinner-indicator"});
    $vui.loadState();
    $(function () {
        $.permission.initLeftZtree();
        $.permission.selectPermis('');
        $.permission.loadPermisTable("/permission/permissionList","");
    });
    /*]]>*/
</script>
<script type="text/html" id="permis-list">
    {{each data as p}}
    <tr id="{{p.id}}"  pId="{{p.parentid}}">
        <td>{{p.remark}}</td>
        <td>{{p.permission}}</td>
        <td class="lr-tree-i">
            <a shiro:hasPermission="permission:edit" onclick="$.permission.loadPermission('/permission/loadPermission',{{p.id}},{{p.parentid}});"  th:alt-title="编辑"><i class="icon icon-pencil"></i></a>
            <a shiro:hasPermission="permission:delete" onclick="$.permission.delPermission('/permission/delPermission',{{p.id}});"  th:alt-title="删除"><i class="icon icon-trash"></i></a>
        </td>
    </tr>
    {{/each}}
</script>
</html>